<template>
    <div class="main">
        <div class="form-container">
            <div  class="form-main">
                <div class="currentCounty">
                      <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="name">省/市/区/县</label><br/>

                    <input class="form-border" id="currentCounty" readonly  @click="showSelectPopup=true" type="text"  placeholder="请填写所在区县"  v-model="cityStr"  /> <br/>
                </div>
                <div class="currentCountry" >
                    <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="name">街道/乡/镇</label><br/>

                    <input class="form-border" id="currentCountry" type="text" name="currentCountry"  placeholder="请填所在街道/乡/镇"  v-model="currentCountry"  /> <br/>
                </div>
              <div class="currentVillage" > 
                    <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="name">社区/村</label><br/>

                    <input class="form-border" id="currentVillage" type="text" name="currentVillage"  placeholder="请填写所在社区/村"  v-model="currentVillage"  /> <br/>
                </div>
               
                <div class="currentLocation" >
                    <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="name">当前所在地</label><br/>

                    <input class="form-border" id="currentLocation" type="text" name="currentLocation"  placeholder="请填写当前所在地"  v-model="currentLocation"  /> <br/>
                </div>
                <div >
                  <label  required>过去14天是否离开本地区</label><br/>
                  <div class="form-border form-twoBor">
                      <div style="border: 1px solid #c6c8c9; border-bottom: none; border-raduis: 3px;" >
                        <el-radio v-model="leaveRegion"  label="1">是</el-radio>
                          <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
                      </div>
                      <div style="border: 1px solid #c6c8c9; border-raduis: 3px; border-top-color:#e5e5e5;">
                        <el-radio v-model="leaveRegion" label="0">否</el-radio>
                        <!-- <input type="radio" name="widows" value="0" id="widowsfemale" v-model="widows" /><label for="widowsb"> 否</label> -->
                      </div>
                  </div>
                </div>
                <div v-show="leaveShow">
                    <div  >
                        <!-- <span class="required" style="color:red">*</span>  -->
                        <label for="name">到达地区</label><br/>

                        <input class="form-border"  type="text"  placeholder="请填写到达地区"  v-model="arrivalRegion"  /> <br/>
                    </div>

                    <div class="query-time">
                        <label for="name">出行时间</label><br/>
                        <div style="margin-top:5px; width:100%; height: 32px; line-height:32px; border: 1px solid #cccccc; text-align: center; " @click="showTimePlugin">
                        <span class="select_show">{{travelTime}}</span>
                        </div><br/>
                    </div>
                    
                    <label  required>交通工具</label><br/>
                    <div class="form-border tizheng clearfix">
                        
                        <div>
                            <el-checkbox  v-model="transport" label="0">火车</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox  v-model="transport" label="1">高铁</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox  v-model="transport" label="2">飞机</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox  v-model="transport" label="3">汽车</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox  v-model="transport" label="5">其它</el-checkbox>
                        </div>
                        
                    </div>
                    <div  >
                        <!-- <span class="required" style="color:red">*</span>  -->
                        <label for="name">其他交通工具</label><br/>
                        <input class="form-border"  type="text"   placeholder="其他交通工具"  v-model="tripMode"  /> <br/>
                    </div>
                    <div >
                        <!-- <span class="required" style="color:red">*</span>  -->
                        <label for="name">班次/车次</label><br/>
                        <input class="form-border" type="text"   placeholder="请填写班次/车次"  v-model="trips"  /> <br/>
                    </div>
                    <div  >
                        <!-- <span class="required" style="color:red">*</span>  -->
                        <label for="name">行程描述</label><br/>
                        <input class="form-border" type="text"   placeholder="请填写行程描述"  v-model="travelDescribe"  /> <br/>
                    </div>
                </div>
            </div>
            
        </div>
        <datetime style="display:none;" v-model="travelTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
         <popup v-model="showSelectPopup" @on-hide="popupChange('hide')" @on-show="popupChange('show')" height="50%">
             <menuLinkage :queryObj="casList" @setCityObj="setCityObj" ref="menuLinkage" />
         </popup>
    </div>
</template>
<script>
import { newquestionnaireData ,queryCityData} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup} from 'vux'
import menuLinkage from '../commons/menuLinkage.vue'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup,
        menuLinkage
    },
    data () {
        return {
            casList:[],
            leaveShow:false,
            leaveRegion:"0",
            arrivalRegion:"",
            transport:[],
            tripMode:'',
            cityStr:"",
            trips:"",//班次车次
            travelDescribe:"",//说明
            levelnum:0,
            showPopupPicker:true,
            travelTime:'', 
            showSelectPopup:false,
            timeShow:false,
            currentProvince:'',//当前所在省
            currentCity: '',//当前所在市
            currentCounty: '',//当前所在区/县
            currentCountry: '',//街道/乡/镇（当前所在地）
            currentVillage: '',//社区/村（当前所在地）
            currentLocation: '',//当前所在地（详细住址)
        }
    },
    created () {
        this.initcascade();
    },
    mounted: function () {
       let personMsg = localStorage.getItem('personMsg');
      //  this.endTime = this.getCurrentDate();
    },
    watch:{
        leaveRegion(){
            if(this.leaveRegion=='1'){
                this.leaveShow=true;
            }else{
                this.leaveShow=false;
            }
        },
        diagnosis(){
          let isdiagnosis = document.getElementById('isdiagnosis');
          if(this.diagnosis != 0){
             isdiagnosis.style.display = 'block'
          } else {
             isdiagnosis.style.display = 'none'
          }
        },
    },
    methods: {
        setCityObj(_list){
            console.log("setCityObj==>",_list)
            if(typeof(_list[0])!='undefined'){
                this.currentProvince=_list[0].name;
                this.cityStr+=_list[0].name;
            }
            if(typeof(_list[1])!='undefined'){
                this.currentCity=_list[1].name;
                this.cityStr+=" "+_list[1].name;
            }
            if(typeof(_list[2])!='undefined'){
                this.currentCounty=_list[2].name;
                this.cityStr+=" "+_list[2].name;
            }
            if(typeof(_list[3])!='undefined'){
                this.currentCountry=_list[3].name;
            }else{
                this.currentCountry="";
            }
            this.showSelectPopup=false;
        },
        showTimePlugin(){
            this.timeShow=true;
        },
        initcascade(){
            let _this=this;
            queryCityData({"parentCode":"000000"},function(res){
                console.log("res= queryCityData=>",res)
                _this.casList=[];
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.casList=res.data;
                    _this.$refs.menuLinkage.initData(_this.casList,1);
                    _this.$refs.menuLinkage.setDefault(['湖北省','武汉市','江夏区'])
                }
            })
        },
        clearTree(){

        },
        
        popupChange(_type){
            console.log("_type==>"+_type);
            
        },
        changeTime(){
            // console.log("change time")
            // const cqueryTime=Date.parse(this.queryTime);
            // const cendTime=Date.parse(this.endTime);
            // if(cqueryTime > cendTime){
            //     this.queryTime = "开始时间";
            //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
            // }
        },
        getCurrentDate(){
              const timeStr = '-';
              const curDate = new Date();
              const curYear =curDate.getFullYear();  //获取完整的年份(4位,1970-????)
              const curMonth = curDate.getMonth()+1;  //获取当前月份(0-11,0代表1月)
              const curDay = curDate.getDate();       //获取当前日(1-31)
              const curWeekDay = curDate.getDay();    //获取当前星期X(0-6,0代表星期天)
              const curHour = curDate.getHours();      //获取当前小时数(0-23)
              const curMinute = curDate.getMinutes();   // 获取当前分钟数(0-59)
              const curSec =curDate.getSeconds();      //获取当前秒数(0-59)
              const Current= curYear+timeStr+curMonth+timeStr+curDay ;
              return Current;
        },
        getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return  unescape(r[2]);
            return null;
        },
        typeTime(val){
            const d = new Date(val);
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
            return resDate;
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: #f8fafb;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        background-size: 100% 100%;
        width: calc(100% -16px);
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        margin-bottom: 10px;
        padding-bottom: 25px;
        .name {
          padding-top: 15px;
        }
        .form-main{
            width: 100%;
            // margin-top: 130px;
            margin-bottom: 30px;
            padding: 0 20px;
            color: #333333;
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 9px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 5px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
    }
label{
  //  margin-bottom: 15px;
}

input{
    border: 1px solid #cccccc;
}
.el-input__inner{
  color: #fdfdfd;
}
.el-radio{
  margin: 5px;
  left: -5px;
  .el-radio__label{
    color: #000;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: #000 !important;
  }
  // .el-radio__input .is-checked+.el-radio__label {
  //   color: #000 !important;
  // }
}
// .yy-input::-webkit-input-placeholder,
//   textarea::-webkit-input-placeholder {
//     /* WebKit browsers */
//     color: red;
//   }
}
</style>